<!-- 呈现一道问题的组件 -->
<template>
  <el-card shadow="hover" class="mb-4">
    <div class="flex as-horizon">
      <!-- 题号 -->
      <div class="mr-4" style="width:22px">{{ index }}</div>
      <!-- 题干 -->
      <div class="content">
        <!-- 题目描述 -->
        <p class="is-size-6">{{ question }}</p>

        <!-- 单选 -->
        <div v-if="type === 'single'">
          <!-- 单选选择框 -->
          <el-radio
            v-for="ch in choices"
            :key="ch.label"
            v-model="singleSelected"
            class="my-2"
            :label="ch.label"
          >
            <span class="mr-3 is-size-6">{{ ch.label }}</span>
            <span class="is-size-6">{{ ch.content }}</span>
          </el-radio>
        </div>

        <!-- 多选 -->
        <div v-if="type === 'multiple'">
          <el-checkbox-group v-model="multipleSelected">
            <!-- 多选选择框 -->
            <el-checkbox
              v-for="ch in choices"
              :key="ch.label"
              class="my-2"
              :label="ch.label"
            >
              <span class="mr-3 is-size-6">{{ ch.label }}</span>
              <span class="is-size-6">{{ ch.content }}</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 填空 -->
        <div v-if="type === 'fill'" style="width:300px">
          <el-input v-model="input" size="medium" placeholder="请输入内容" />
        </div>

        <!-- 答案和难度，仅在错题模式下呈现 -->
        <div v-if="mode === 'review'" class="flex as-horizon mt-5">
          <div
            v-if="status !== 0"
            :class="
              status === 1 ? 'has-text-success-dark' : 'has-text-danger-dark'
            "
          >
            {{ status === 1 ? '正确' : '错误' }}
          </div>
          <div class="mx-4">难度:{{ difficult }}</div>

          <!-- <div class="mr-3 has-text-grey-light"></div> -->

          <el-button
            size="mini"
            round
            class="is-align-self-flex-end"
            @click="showCorrect = !showCorrect"
          >
            <span>{{ showCorrect ? '隐藏' : '答案' }}</span>
          </el-button>

          <div class="ml-3">
            {{ showCorrect ? correct.toString() : '' }}
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import variables from '@/styles/variables.scss'
const examUtils = require('@/utils/exam-utils')

export default {
  props: {
    index: {
      type: Number,
      require: true,
      default: 0
    }, // 题号，从1开始！
    examId: {
      type: Number,
      require: true,
      default: -1
    }, // 题目在数据库中的ID
    qid: {
      type: Number,
      require: true,
      default: -1
    }, // 题目在数据库中的ID
    subject: {
      type: String,
      require: false,
      default: '科目...'
    }, // 科目
    mode: {
      type: String,
      require: true,
      default: 'exam'
    }, // 场景 考试 exam 错题回顾 review
    type: {
      type: String,
      require: true,
      default: 'single'
    }, // 试题类型 单选 single 多选 multiple 填空 fill
    correct: {
      type: [String, Array],
      require: false,
      default: '?'
    }, // 标准答案
    difficult: {
      type: Number,
      require: false,
      default: 0
    }, // 难度
    question: {
      type: String,
      require: true,
      default: '题干...'
    }, // 题干
    status: {
      type: Number,
      require: false,
      default: 0
    }, // 表示 正确1 与 错误2
    choices: {
      type: Array,
      require: false,
      default: () => {
        return [
          {
            label: 'A',
            content: '...'
          }
        ]
      }
    }, // 选项 数组 如果是填空题就可以不传
    answer: {
      type: Array,
      require: false,
      default: () => {}
    }
  },
  data() {
    return {
      showCorrect: false, // 是否显示答案
      countdown: null, // 倒计时器，用于延时保存
      singleSelected: '',
      multipleSelected: [],
      input: ''
    }
  },
  variables() {
    return variables
  },

  watch: {
    // 当答案发生变化时
    singleSelected(newVal, oldVal) {
      this.handleAnswerChange(newVal)
    },
    multipleSelected(newVal, oldVal) {
      this.handleAnswerChange(newVal)
    },
    input(newVal, oldVal) {
      this.handleAnswerChange(newVal)
    }
  },

  mounted() {
    this.setAnswer(this.answer)
  },

  methods: {
    // TODO 手动设置答案，在还原考试现场时使用
    setAnswer(ansArray) {
      if (!ansArray) return
      if (this.type === 'single') this.singleSelected = ansArray[0]
      else {
        this.multipleSelected = ansArray
      }
    },

    handleAnswerChange(newAnswer) {
      if (this.mode !== 'exam') return

      // 当有选择的时候向左侧的Info栏对应的题号，填充样式，做标记表示已作答
      // 只会有多选题出现选了又清空的情况，
      // 因此单选题只要有变化就一定是已选择而不可能清空选择
      // const circle = document.getElementById('circle' + this.qid)
      const circle = document.getElementById('circle' + this.qid)
      if (this.multipleSelected.length === 0 && this.type === 'multiple') {
        if (circle) circle.classList.replace('selected', 'unselected')
      } else {
        if (circle) circle.classList.replace('unselected', 'selected')
      }

      if (this.countdown) clearTimeout(this.countdown)
      // 延迟 1s 之后保存，若这期间又有变化，重新计时
      this.countdown = setTimeout(() => {
        examUtils.saveAnswerToCookies(this.examId, this.qid, newAnswer)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.card {
  border-radius: 8px;
}

.qlist-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 260px;
}

.qlist-item {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.selected {
  background-color: $primaryColor;
  color: white;
}

.unselected {
  background-color: white;
  color: black;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
